<!DOCTYPE html>
<html lang=zh>
<head>
    <!-- so meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
    <meta name="description" content="Vue3UI库&#x2F;相关工具&#x2F;可视化&#x2F;生态全分享 1.Web UI库1.   ElementUI Plus一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库https:&#x2F;&#x2F;element-plus.org&#x2F;zh-CN&#x2F; 2.    Ant Design of VueAnt Design 的 Vue 实现，开发和服务于企业级后台产品https:&#x2F;&#x2F;ww">
<meta property="og:type" content="article">
<meta property="og:title" content="UI库&#x2F;相关工具&#x2F;可视化&#x2F;生态全分享">
<meta property="og:url" content="https://mihaoyou.gitee.io/UI%E5%BA%93-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7-%E5%8F%AF%E8%A7%86%E5%8C%96-%E7%94%9F%E6%80%81%E5%85%A8%E5%88%86%E4%BA%AB/index.html">
<meta property="og:site_name" content="Cactus">
<meta property="og:description" content="Vue3UI库&#x2F;相关工具&#x2F;可视化&#x2F;生态全分享 1.Web UI库1.   ElementUI Plus一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库https:&#x2F;&#x2F;element-plus.org&#x2F;zh-CN&#x2F; 2.    Ant Design of VueAnt Design 的 Vue 实现，开发和服务于企业级后台产品https:&#x2F;&#x2F;ww">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2023-07-27T07:05:31.000Z">
<meta property="article:modified_time" content="2023-07-27T07:06:26.467Z">
<meta property="article:author" content="云雪">
<meta property="article:tag" content="vue">
<meta name="twitter:card" content="summary">
    
    
      
        
          <link rel="shortcut icon" href="/images/favicon.ico">
        
      
      
        
          <link rel="icon" type="image/png" href="/images/favicon-192x192.png" sizes="192x192">
        
      
      
        
          <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
        
      
    
    <!-- title -->
    <title>UI库/相关工具/可视化/生态全分享</title>

    <!-- styles -->
    
<link rel="stylesheet" href="/css/style.css">


     <!-- 添加到这里！！ -->
     
<script src="/js/switch.js"></script>


    <!-- persian styles -->
    
    <!-- rss -->
    
    
	<!-- mathjax -->
	
<meta name="generator" content="Hexo 6.3.0"><link rel="alternate" href="/atom.xml" title="Cactus" type="application/atom+xml">
</head>

<body class="max-width mx-auto px3 ltr">
    
      <div id="header-post">
  <a id="menu-icon" href="#" aria-label="目录"><i class="fas fa-bars fa-lg"></i></a>
  <a id="menu-icon-tablet" href="#" aria-label="目录"><i class="fas fa-bars fa-lg"></i></a>
  <a id="top-icon-tablet" href="#" aria-label="顶部" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" style="display:none;"><i class="fas fa-chevron-up fa-lg"></i></a>
  <span id="menu">
    <span id="nav">
      <ul>
        <!--
       --><li><a href="/">首页</a></li><!--
     --><!--
       --><li><a href="/about/">关于</a></li><!--
     --><!--
       --><li><a href="/archives/">归档</a></li><!--
     --><!--
       --><li><a href="/categories/">分类</a></li><!--
     --><!--
       --><li><a href="/search/">搜索</a></li><!--
     -->
      </ul>
    </span>
    <br/>
    <span id="actions">
      <ul>
        
        <li><a class="icon" aria-label="上一篇" href="/ES6/"><i class="fas fa-chevron-left" aria-hidden="true" onmouseover="$('#i-prev').toggle();" onmouseout="$('#i-prev').toggle();"></i></a></li>
        
        
        <li><a class="icon" aria-label="下一篇" href="/%E7%94%9F%E6%B4%BB%E6%9D%82%E8%AE%B0/"><i class="fas fa-chevron-right" aria-hidden="true" onmouseover="$('#i-next').toggle();" onmouseout="$('#i-next').toggle();"></i></a></li>
        
        <li><a class="icon" aria-label="返回顶部" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fas fa-chevron-up" aria-hidden="true" onmouseover="$('#i-top').toggle();" onmouseout="$('#i-top').toggle();"></i></a></li>
        <li><a class="icon" aria-label="分享文章" href="#"><i class="fas fa-share-alt" aria-hidden="true" onmouseover="$('#i-share').toggle();" onmouseout="$('#i-share').toggle();" onclick="$('#share').toggle();return false;"></i></a></li>

        <li><a class="icon" aria-label="切换主题 " href="#"><i class="fas fa-lightbulb" aria-hidden="true" onmouseover="$('#i-switch').toggle();" onmouseout="$('#i-switch').toggle();" onclick="switchNightMode();return false";></i></a></li>

      </ul>
      <span id="i-prev" class="info" style="display:none;">上一篇</span>
      <span id="i-next" class="info" style="display:none;">下一篇</span>
      <span id="i-top" class="info" style="display:none;">返回顶部</span>
      <span id="i-share" class="info" style="display:none;">分享文章</span>
      <span id="i-switch" class="info" style="display:none;">切换主题</span>
    </span>
    <br/>
    <div id="share" style="display: none">
      <ul>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.facebook.com/sharer.php?u=https://mihaoyou.gitee.io/UI%E5%BA%93-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7-%E5%8F%AF%E8%A7%86%E5%8C%96-%E7%94%9F%E6%80%81%E5%85%A8%E5%88%86%E4%BA%AB/"><i class="fab fa-facebook " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://twitter.com/share?url=https://mihaoyou.gitee.io/UI%E5%BA%93-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7-%E5%8F%AF%E8%A7%86%E5%8C%96-%E7%94%9F%E6%80%81%E5%85%A8%E5%88%86%E4%BA%AB/&text=UI库/相关工具/可视化/生态全分享"><i class="fab fa-twitter " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.linkedin.com/shareArticle?url=https://mihaoyou.gitee.io/UI%E5%BA%93-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7-%E5%8F%AF%E8%A7%86%E5%8C%96-%E7%94%9F%E6%80%81%E5%85%A8%E5%88%86%E4%BA%AB/&title=UI库/相关工具/可视化/生态全分享"><i class="fab fa-linkedin " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://pinterest.com/pin/create/bookmarklet/?url=https://mihaoyou.gitee.io/UI%E5%BA%93-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7-%E5%8F%AF%E8%A7%86%E5%8C%96-%E7%94%9F%E6%80%81%E5%85%A8%E5%88%86%E4%BA%AB/&is_video=false&description=UI库/相关工具/可视化/生态全分享"><i class="fab fa-pinterest " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=UI库/相关工具/可视化/生态全分享&body=Check out this article: https://mihaoyou.gitee.io/UI%E5%BA%93-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7-%E5%8F%AF%E8%A7%86%E5%8C%96-%E7%94%9F%E6%80%81%E5%85%A8%E5%88%86%E4%BA%AB/"><i class="fas fa-envelope " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://getpocket.com/save?url=https://mihaoyou.gitee.io/UI%E5%BA%93-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7-%E5%8F%AF%E8%A7%86%E5%8C%96-%E7%94%9F%E6%80%81%E5%85%A8%E5%88%86%E4%BA%AB/&title=UI库/相关工具/可视化/生态全分享"><i class="fab fa-get-pocket " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://reddit.com/submit?url=https://mihaoyou.gitee.io/UI%E5%BA%93-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7-%E5%8F%AF%E8%A7%86%E5%8C%96-%E7%94%9F%E6%80%81%E5%85%A8%E5%88%86%E4%BA%AB/&title=UI库/相关工具/可视化/生态全分享"><i class="fab fa-reddit " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.stumbleupon.com/submit?url=https://mihaoyou.gitee.io/UI%E5%BA%93-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7-%E5%8F%AF%E8%A7%86%E5%8C%96-%E7%94%9F%E6%80%81%E5%85%A8%E5%88%86%E4%BA%AB/&title=UI库/相关工具/可视化/生态全分享"><i class="fab fa-stumbleupon " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://digg.com/submit?url=https://mihaoyou.gitee.io/UI%E5%BA%93-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7-%E5%8F%AF%E8%A7%86%E5%8C%96-%E7%94%9F%E6%80%81%E5%85%A8%E5%88%86%E4%BA%AB/&title=UI库/相关工具/可视化/生态全分享"><i class="fab fa-digg " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.tumblr.com/share/link?url=https://mihaoyou.gitee.io/UI%E5%BA%93-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7-%E5%8F%AF%E8%A7%86%E5%8C%96-%E7%94%9F%E6%80%81%E5%85%A8%E5%88%86%E4%BA%AB/&name=UI库/相关工具/可视化/生态全分享&description="><i class="fab fa-tumblr " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://news.ycombinator.com/submitlink?u=https://mihaoyou.gitee.io/UI%E5%BA%93-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7-%E5%8F%AF%E8%A7%86%E5%8C%96-%E7%94%9F%E6%80%81%E5%85%A8%E5%88%86%E4%BA%AB/&t=UI库/相关工具/可视化/生态全分享"><i class="fab fa-hacker-news " aria-hidden="true"></i></a></li>
</ul>

    </div>
    <div id="toc">
      <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Vue3"><span class="toc-number">1.</span> <span class="toc-text">Vue3</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-Web-UI%E5%BA%93"><span class="toc-number">1.1.</span> <span class="toc-text">1.Web UI库</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-ElementUI-Plus"><span class="toc-number">1.1.1.</span> <span class="toc-text">1.   ElementUI Plus</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-Ant-Design-of-Vue"><span class="toc-number">1.1.2.</span> <span class="toc-text">2.    Ant Design of Vue</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-BalmUI"><span class="toc-number">1.1.3.</span> <span class="toc-text">3.    BalmUI</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-Naive-UI"><span class="toc-number">1.1.4.</span> <span class="toc-text">4.    Naive UI</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-arco-design"><span class="toc-number">1.1.5.</span> <span class="toc-text">5.    arco.design</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-Quasar"><span class="toc-number">1.1.6.</span> <span class="toc-text">6,     Quasar</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-iDUX"><span class="toc-number">1.1.7.</span> <span class="toc-text">7.      iDUX</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#8-TDesign"><span class="toc-number">1.1.8.</span> <span class="toc-text">8.     TDesign</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#9-PrimeVue"><span class="toc-number">1.1.9.</span> <span class="toc-text">9.      PrimeVue</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#10-DevUI"><span class="toc-number">1.1.10.</span> <span class="toc-text">10.    DevUI</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#11-vuestic-ui"><span class="toc-number">1.1.11.</span> <span class="toc-text">11.     vuestic-ui</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-Headless-UI"><span class="toc-number">1.1.12.</span> <span class="toc-text">12.     Headless UI</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#13-View-UI-Plus"><span class="toc-number">1.1.13.</span> <span class="toc-text">13.      View UI Plus</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E7%A7%BB%E5%8A%A8UI%E5%BA%93"><span class="toc-number">1.2.</span> <span class="toc-text">2.移动UI库</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#14-Vant"><span class="toc-number">1.2.1.</span> <span class="toc-text">14.       Vant</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#15-NutUI"><span class="toc-number">1.2.2.</span> <span class="toc-text">15.      NutUI</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#16-Varlet"><span class="toc-number">1.2.3.</span> <span class="toc-text">16.     Varlet</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#17-nutui-bingo"><span class="toc-number">1.2.4.</span> <span class="toc-text">17.       nutui-bingo</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7"><span class="toc-number">1.3.</span> <span class="toc-text">3.相关工具</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#18-unplugin-vue-components"><span class="toc-number">1.3.1.</span> <span class="toc-text">18.      unplugin-vue-components</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#19-vuex-persistedstate"><span class="toc-number">1.3.2.</span> <span class="toc-text">19.      vuex-persistedstate</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#20-vuex-persist"><span class="toc-number">1.3.3.</span> <span class="toc-text">20.       vuex-persist</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#21-vueuse-x2F-gesture"><span class="toc-number">1.3.4.</span> <span class="toc-text">21.      @vueuse&#x2F;gesture</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#22-unplugin-auto-import"><span class="toc-number">1.3.5.</span> <span class="toc-text">22.      unplugin-auto-import</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#23-pinia-plugin-persistedstate"><span class="toc-number">1.3.6.</span> <span class="toc-text">23.     pinia-plugin-persistedstate</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#24-https-vue-termui-dev"><span class="toc-number">1.3.7.</span> <span class="toc-text">24.     https:&#x2F;&#x2F;vue-termui.dev&#x2F;</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E5%8F%AF%E8%A7%86%E5%8C%96"><span class="toc-number">1.4.</span> <span class="toc-text">4.可视化</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#25-Pdfvuer"><span class="toc-number">1.4.1.</span> <span class="toc-text">25.    Pdfvuer</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#26-vue3-marquee"><span class="toc-number">1.4.2.</span> <span class="toc-text">26.      vue3-marquee</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#27-Vue-ECharts"><span class="toc-number">1.4.3.</span> <span class="toc-text">27.     Vue-ECharts</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#28-iconpark"><span class="toc-number">1.4.4.</span> <span class="toc-text">28.     iconpark</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E6%8F%92%E4%BB%B6"><span class="toc-number">1.5.</span> <span class="toc-text">5.插件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#29-vue-multiselect-next"><span class="toc-number">1.5.1.</span> <span class="toc-text">29.    vue-multiselect-next</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#30-vue-print-nb"><span class="toc-number">1.5.2.</span> <span class="toc-text">30.     vue-print-nb</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#31-vue-i18n-next"><span class="toc-number">1.5.3.</span> <span class="toc-text">31.      vue-i18n-next</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#32-vue-cropper"><span class="toc-number">1.5.4.</span> <span class="toc-text">32.     vue-cropper</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#33-Vue-Grid-Layout"><span class="toc-number">1.5.5.</span> <span class="toc-text">33.     Vue Grid Layout</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#34-Vue-Qrcode-Reader"><span class="toc-number">1.5.6.</span> <span class="toc-text">34.     Vue Qrcode Reader</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#35-Makeit-Captcha"><span class="toc-number">1.5.7.</span> <span class="toc-text">35.     Makeit Captcha</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#36-vue3-clipboard"><span class="toc-number">1.5.8.</span> <span class="toc-text">36.     vue3-clipboard</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#37-vue-draggable"><span class="toc-number">1.5.9.</span> <span class="toc-text">37.       vue.draggable</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#38-BetterScroll"><span class="toc-number">1.5.10.</span> <span class="toc-text">38.        BetterScroll</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E7%9B%B8%E5%85%B3%E7%94%9F%E6%80%81"><span class="toc-number">1.6.</span> <span class="toc-text">6.相关生态</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#39-Vue-%E6%8F%92%E4%BB%B6%E5%BA%93"><span class="toc-number">1.6.1.</span> <span class="toc-text">39.    Vue 插件库</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#40-Pinia"><span class="toc-number">1.6.2.</span> <span class="toc-text">40.     Pinia</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#41-Nuxt-Modules"><span class="toc-number">1.6.3.</span> <span class="toc-text">41.     Nuxt Modules</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#42-Nuxt-3"><span class="toc-number">1.6.4.</span> <span class="toc-text">42.      Nuxt 3</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#43-vuepress"><span class="toc-number">1.6.5.</span> <span class="toc-text">43.      vuepress</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#44-VueUse"><span class="toc-number">1.6.6.</span> <span class="toc-text">44.      VueUse</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E5%8A%A8%E7%94%BB"><span class="toc-number">1.7.</span> <span class="toc-text">7.动画</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#45-vue-starport"><span class="toc-number">1.7.1.</span> <span class="toc-text">45.   vue-starport</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#46-vueuse-x2F-motion"><span class="toc-number">1.7.2.</span> <span class="toc-text">46.     @vueuse&#x2F;motion</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-%E9%9F%B3%E8%A7%86%E9%A2%91"><span class="toc-number">1.8.</span> <span class="toc-text">8.音视频</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#47-vueuse-x2F-sound"><span class="toc-number">1.8.1.</span> <span class="toc-text">47.   @vueuse&#x2F;sound</span></a></li></ol></li></ol></li></ol>
    </div>
  </span>
</div>

    
    <div class="content index py4">
        
        <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    
    <h1 class="posttitle" itemprop="name headline">
        UI库/相关工具/可视化/生态全分享
    </h1>



    <div class="meta">
      <span class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">云雪</span>
      </span>
      
    <div class="postdate">
      
        <time datetime="2023-07-27T07:05:31.000Z" itemprop="datePublished">2023-07-27</time>
        
      
    </div>


      
    <div class="article-category">
        <i class="fas fa-archive"></i>
        <a class="category-link" href="/categories/html/">html</a>
    </div>


      
    <div class="article-tag">
        <i class="fas fa-tag"></i>
        <a class="tag-link-link" href="/tags/vue/" rel="tag">vue</a>
    </div>


    </div>
  </header>
  

  <div class="content" itemprop="articleBody">
    <h1 id="Vue3"><a href="#Vue3" class="headerlink" title="Vue3"></a>Vue3</h1><p>UI库&#x2F;相关工具&#x2F;可视化&#x2F;生态全分享</p>
<h2 id="1-Web-UI库"><a href="#1-Web-UI库" class="headerlink" title="1.Web UI库"></a>1.Web UI库</h2><h3 id="1-ElementUI-Plus"><a href="#1-ElementUI-Plus" class="headerlink" title="1.   ElementUI Plus"></a>1.   ElementUI Plus</h3><p>一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库<br><a target="_blank" rel="noopener" href="https://element-plus.org/zh-CN/">https://element-plus.org/zh-CN/</a></p>
<h3 id="2-Ant-Design-of-Vue"><a href="#2-Ant-Design-of-Vue" class="headerlink" title="2.    Ant Design of Vue"></a>2.    Ant Design of Vue</h3><p>Ant Design 的 Vue 实现，开发和服务于企业级后台产品<br><a target="_blank" rel="noopener" href="https://www.antdv.com/docs/vue/introduce-cn">https://www.antdv.com/docs/vue/introduce-cn</a></p>
<h3 id="3-BalmUI"><a href="#3-BalmUI" class="headerlink" title="3.    BalmUI"></a>3.    BalmUI</h3><p>基于谷歌的 Material Design，附带 Vue 插件和指令，以及从简单到复杂的高度可定制组件<br><a target="_blank" rel="noopener" href="https://next-material.balmjs.com/">https://next-material.balmjs.com/</a></p>
<h3 id="4-Naive-UI"><a href="#4-Naive-UI" class="headerlink" title="4.    Naive UI"></a>4.    Naive UI</h3><p>图森Vue3的组件库，文档完整，我项目中经常使用<br><a target="_blank" rel="noopener" href="https://www.naiveui.com/zh-CN/os-theme">https://www.naiveui.com/zh-CN/os-theme</a></p>
<h3 id="5-arco-design"><a href="#5-arco-design" class="headerlink" title="5.    arco.design"></a>5.    arco.design</h3><p>字节跳动企业级产品设计系统，支持React和Vue双版本<br><a target="_blank" rel="noopener" href="https://arco.design/">https://arco.design/</a></p>
<h3 id="6-Quasar"><a href="#6-Quasar" class="headerlink" title="6,     Quasar"></a>6,     Quasar</h3><p>轻松构建高性能和高质量的Vue.js 3用户界面，好用，但没有中文文档<br><a target="_blank" rel="noopener" href="https://quasar.dev/">https://quasar.dev/</a></p>
<h3 id="7-iDUX"><a href="#7-iDUX" class="headerlink" title="7.      iDUX"></a>7.      iDUX</h3><p>Vue3.x 的 UI 组件库，完全使用 TypeScript 开发<br><a target="_blank" rel="noopener" href="https://idux.site/">https://idux.site/</a></p>
<h3 id="8-TDesign"><a href="#8-TDesign" class="headerlink" title="8.     TDesign"></a>8.     TDesign</h3><p>腾讯业务团队在服务业务过程中沉淀的一套企业级设计体系<br><a target="_blank" rel="noopener" href="https://tdesign.tencent.com/">https://tdesign.tencent.com/</a><br><a target="_blank" rel="noopener" href="https://tdesign.tencent.com/vue-next/overview">https://tdesign.tencent.com/vue-next/overview</a></p>
<h3 id="9-PrimeVue"><a href="#9-PrimeVue" class="headerlink" title="9.      PrimeVue"></a>9.      PrimeVue</h3><p>易于使用、多功能、高性能的 Vue UI 组件库<br><a target="_blank" rel="noopener" href="https://www.primefaces.org/primevue/">https://www.primefaces.org/primevue/</a></p>
<h3 id="10-DevUI"><a href="#10-DevUI" class="headerlink" title="10.    DevUI"></a>10.    DevUI</h3><p>华为基于 Vue3 和 DevUI 设计的 UI 组件<br><a target="_blank" rel="noopener" href="https://vue-devui.github.io/">https://vue-devui.github.io/</a></p>
<h3 id="11-vuestic-ui"><a href="#11-vuestic-ui" class="headerlink" title="11.     vuestic-ui"></a>11.     vuestic-ui</h3><p>Vue 3 的免费和开源 UI 库 ,UI非常好看，并且有可用后台管理界面。<br><a target="_blank" rel="noopener" href="https://vuestic.dev/">https://vuestic.dev/</a></p>
<h3 id="12-Headless-UI"><a href="#12-Headless-UI" class="headerlink" title="12.     Headless UI"></a>12.     Headless UI</h3><p>完全无样式、完全可访问的 UI 组件，旨在与 Tailwind CSS 完美集成。<br><a target="_blank" rel="noopener" href="https://headlessui.com/">https://headlessui.com/</a></p>
<h3 id="13-View-UI-Plus"><a href="#13-View-UI-Plus" class="headerlink" title="13.      View UI Plus"></a>13.      View UI Plus</h3><p>基于 Vue.js 3 的企业级 UI 组件库和前端解决方案<br><a target="_blank" rel="noopener" href="https://www.iviewui.com/">https://www.iviewui.com/</a></p>
<h2 id="2-移动UI库"><a href="#2-移动UI库" class="headerlink" title="2.移动UI库"></a>2.移动UI库</h2><h3 id="14-Vant"><a href="#14-Vant" class="headerlink" title="14.       Vant"></a>14.       Vant</h3><p>有赞轻量、可靠的移动端组件库<br><a target="_blank" rel="noopener" href="https://vant-contrib.gitee.io/vant/#/zh-CN">https://vant-contrib.gitee.io/vant/#/zh-CN</a></p>
<h3 id="15-NutUI"><a href="#15-NutUI" class="headerlink" title="15.      NutUI"></a>15.      NutUI</h3><p>京东风格的轻量级移动端 Vue 组件库，非常适合移动端电商使用。<br><a target="_blank" rel="noopener" href="https://nutui.jd.com/#/">https://nutui.jd.com/#/</a></p>
<h3 id="16-Varlet"><a href="#16-Varlet" class="headerlink" title="16.     Varlet"></a>16.     Varlet</h3><p>Material 风格移动端组件库 ，文档非常齐全。<br><a target="_blank" rel="noopener" href="https://varlet.gitee.io/varlet-ui/#/zh-CN/home">https://varlet.gitee.io/varlet-ui/#/zh-CN/home</a></p>
<h3 id="17-nutui-bingo"><a href="#17-nutui-bingo" class="headerlink" title="17.       nutui-bingo"></a>17.       nutui-bingo</h3><p>京东基于 NutUI 的抽奖组件库，助力营销活动和小游戏场景。<br><a target="_blank" rel="noopener" href="https://nutui.jd.com/bingo/#/">https://nutui.jd.com/bingo/#/</a></p>
<h2 id="3-相关工具"><a href="#3-相关工具" class="headerlink" title="3.相关工具"></a>3.相关工具</h2><h3 id="18-unplugin-vue-components"><a href="#18-unplugin-vue-components" class="headerlink" title="18.      unplugin-vue-components"></a>18.      unplugin-vue-components</h3><p>antfu 按需组件自动导入，开箱即用地支持 Vue 2 和 Vue 3，Tree-shakable，只注册你使用的组件，附有流行UI 库的内置解析器。<br><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/unplugin-vue-components">https://www.npmjs.com/package/unplugin-vue-components</a></p>
<h3 id="19-vuex-persistedstate"><a href="#19-vuex-persistedstate" class="headerlink" title="19.      vuex-persistedstate"></a>19.      vuex-persistedstate</h3><p>在页面重新加载之间保持并重载您的 Vuex 状态<br><a target="_blank" rel="noopener" href="https://github.com/robinvdvleuten/vuex-persistedstate">https://github.com/robinvdvleuten/vuex-persistedstate</a></p>
<h3 id="20-vuex-persist"><a href="#20-vuex-persist" class="headerlink" title="20.       vuex-persist"></a>20.       vuex-persist</h3><p>支持 Typescript 的Vuex插件，它能够将应用程序的状态保存到持久存储中，例如 Cookies 或 localStorage<br><a target="_blank" rel="noopener" href="https://championswimmer.in/vuex-persist/">https://championswimmer.in/vuex-persist/</a></p>
<h3 id="21-vueuse-x2F-gesture"><a href="#21-vueuse-x2F-gesture" class="headerlink" title="21.      @vueuse&#x2F;gesture"></a>21.      @vueuse&#x2F;gesture</h3><p>手势库，使应用程序具有交互性<br><a target="_blank" rel="noopener" href="https://gesture.vueuse.org/">https://gesture.vueuse.org/</a></p>
<h3 id="22-unplugin-auto-import"><a href="#22-unplugin-auto-import" class="headerlink" title="22.      unplugin-auto-import"></a>22.      unplugin-auto-import</h3><p>antfu 自动导入 Vite、Webpack、Rollup 和 esbuild 的 API。支持 TypeScript。<br><a target="_blank" rel="noopener" href="https://github.com/antfu/unplugin-auto-import">https://github.com/antfu/unplugin-auto-import</a></p>
<h3 id="23-pinia-plugin-persistedstate"><a href="#23-pinia-plugin-persistedstate" class="headerlink" title="23.     pinia-plugin-persistedstate"></a>23.     pinia-plugin-persistedstate</h3><p>Pinia 商店的可配置持久性<br><a target="_blank" rel="noopener" href="https://github.com/prazdevs/pinia-plugin-persistedstate">https://github.com/prazdevs/pinia-plugin-persistedstate</a></p>
<h3 id="24-https-vue-termui-dev"><a href="#24-https-vue-termui-dev" class="headerlink" title="24.     https://vue-termui.dev/"></a>24.     <a target="_blank" rel="noopener" href="https://vue-termui.dev/">https://vue-termui.dev/</a></h3><p>一个基于 Vue.js 的终端 UI 框架，可让您轻松构建现代终端应用程序<br><a target="_blank" rel="noopener" href="https://vue-termui.dev/">https://vue-termui.dev/</a></p>
<h2 id="4-可视化"><a href="#4-可视化" class="headerlink" title="4.可视化"></a>4.可视化</h2><h3 id="25-Pdfvuer"><a href="#25-Pdfvuer" class="headerlink" title="25.    Pdfvuer"></a>25.    Pdfvuer</h3><p>DF 查看器，使用 Mozilla 的 PDF.js，支持 Vue2 和 Vue3<br><a target="_blank" rel="noopener" href="https://arkokoley.github.io/pdfvuer/">https://arkokoley.github.io/pdfvuer/</a></p>
<h3 id="26-vue3-marquee"><a href="#26-vue3-marquee" class="headerlink" title="26.      vue3-marquee"></a>26.      vue3-marquee</h3><p>无缝滚动组件<br><a target="_blank" rel="noopener" href="https://vue3-marquee.vercel.app/">https://vue3-marquee.vercel.app/</a></p>
<h3 id="27-Vue-ECharts"><a href="#27-Vue-ECharts" class="headerlink" title="27.     Vue-ECharts"></a>27.     Vue-ECharts</h3><p>百度ECharts 的 Vue.js 组件。 配置参考Echarts官方 基于 ECharts v5+ 开发，适用于Vue.js 2&#x2F;3。<br><a target="_blank" rel="noopener" href="https://vue-echarts.dev/">https://vue-echarts.dev/</a></p>
<h3 id="28-iconpark"><a href="#28-iconpark" class="headerlink" title="28.     iconpark"></a>28.     iconpark</h3><p>字节跳动出品，将一个SVG图标转化为多个主题，并生成React图标，Vue图标，svg图标<br><a target="_blank" rel="noopener" href="https://iconpark.oceanengine.com/home">https://iconpark.oceanengine.com/home</a></p>
<h2 id="5-插件"><a href="#5-插件" class="headerlink" title="5.插件"></a>5.插件</h2><h3 id="29-vue-multiselect-next"><a href="#29-vue-multiselect-next" class="headerlink" title="29.    vue-multiselect-next"></a>29.    vue-multiselect-next</h3><p>Vue.js 的通用选择&#x2F;多选&#x2F;标记组件<br><a target="_blank" rel="noopener" href="https://vue-multiselect.js.org/">https://vue-multiselect.js.org/</a></p>
<h3 id="30-vue-print-nb"><a href="#30-vue-print-nb" class="headerlink" title="30.     vue-print-nb"></a>30.     vue-print-nb</h3><p>用于印刷、简单、快速、方便、轻便的指令包装器<br><a target="_blank" rel="noopener" href="https://github.com/Power-kxLee/vue-print-nb">https://github.com/Power-kxLee/vue-print-nb</a></p>
<h3 id="31-vue-i18n-next"><a href="#31-vue-i18n-next" class="headerlink" title="31.      vue-i18n-next"></a>31.      vue-i18n-next</h3><p>Vue3的国际化插件<br><a target="_blank" rel="noopener" href="https://vue-i18n.intlify.dev/">https://vue-i18n.intlify.dev/</a></p>
<h3 id="32-vue-cropper"><a href="#32-vue-cropper" class="headerlink" title="32.     vue-cropper"></a>32.     vue-cropper</h3><p>简单的vue图片裁剪插件<br><a target="_blank" rel="noopener" href="http://github.xyxiao.cn/vue-cropper/example/">http://github.xyxiao.cn/vue-cropper/example/</a></p>
<h3 id="33-Vue-Grid-Layout"><a href="#33-Vue-Grid-Layout" class="headerlink" title="33.     Vue Grid Layout"></a>33.     Vue Grid Layout</h3><p>Vue.js 的网格布局系统<br><a target="_blank" rel="noopener" href="https://jbaysolutions.github.io/">https://jbaysolutions.github.io/</a></p>
<h3 id="34-Vue-Qrcode-Reader"><a href="#34-Vue-Qrcode-Reader" class="headerlink" title="34.     Vue Qrcode Reader"></a>34.     Vue Qrcode Reader</h3><p>允许在不离开浏览器的情况下检测和解码二维码<br><a target="_blank" rel="noopener" href="https://gruhn.github.io/vue-qrcode-reader/">https://gruhn.github.io/vue-qrcode-reader/</a></p>
<h3 id="35-Makeit-Captcha"><a href="#35-Makeit-Captcha" class="headerlink" title="35.     Makeit Captcha"></a>35.     Makeit Captcha</h3><p>基于 Vue3 + Vite + Canvas 开发的滑块验证码，动态生成验证滑块，结合后端的二次校验，能有效的避免被抓取模拟验证<a target="_blank" rel="noopener" href="https://admin.makeit.vip/components/captcha">https://admin.makeit.vip/components/captcha</a></p>
<h3 id="36-vue3-clipboard"><a href="#36-vue3-clipboard" class="headerlink" title="36.     vue3-clipboard"></a>36.     vue3-clipboard</h3><p>Vue 3 的 clipboard.js<br><a target="_blank" rel="noopener" href="https://github.com/soerenmartius/vue3-clipboard">https://github.com/soerenmartius/vue3-clipboard</a></p>
<h3 id="37-vue-draggable"><a href="#37-vue-draggable" class="headerlink" title="37.       vue.draggable"></a>37.       vue.draggable</h3><p>基于Sortable.js的Vue 3拖放组件<br><a target="_blank" rel="noopener" href="https://sortablejs.github.io/vue.draggable.next/#/simple">https://sortablejs.github.io/vue.draggable.next/#/simple</a></p>
<h3 id="38-BetterScroll"><a href="#38-BetterScroll" class="headerlink" title="38.        BetterScroll"></a>38.        BetterScroll</h3><p>解决移动端（已支持 PC）各种滚动场景需求的插件。<br><a target="_blank" rel="noopener" href="https://better-scroll.github.io/docs/zh-CN/">https://better-scroll.github.io/docs/zh-CN/</a></p>
<h2 id="6-相关生态"><a href="#6-相关生态" class="headerlink" title="6.相关生态"></a>6.相关生态</h2><h3 id="39-Vue-插件库"><a href="#39-Vue-插件库" class="headerlink" title="39.    Vue 插件库"></a>39.    Vue 插件库</h3><p><a target="_blank" rel="noopener" href="https://www.vue365.cn/">https://www.vue365.cn/</a></p>
<h3 id="40-Pinia"><a href="#40-Pinia" class="headerlink" title="40.     Pinia"></a>40.     Pinia</h3><p>轻量级状态管理库，API 设计更接近Vuex 5的提案<br><a target="_blank" rel="noopener" href="https://pinia.vuejs.org/">https://pinia.vuejs.org/</a></p>
<h3 id="41-Nuxt-Modules"><a href="#41-Nuxt-Modules" class="headerlink" title="41.     Nuxt Modules"></a>41.     Nuxt Modules</h3><p>Nuxt 发现我们的模块列表以增强您的Nuxt 项目<br><a target="_blank" rel="noopener" href="https://modules.nuxtjs.org/">https://modules.nuxtjs.org/</a></p>
<h3 id="42-Nuxt-3"><a href="#42-Nuxt-3" class="headerlink" title="42.      Nuxt 3"></a>42.      Nuxt 3</h3><p>轻量级应用框架,可用来创建服务端渲染 (SSR) 应用<br><a target="_blank" rel="noopener" href="https://v3.nuxtjs.org/">https://v3.nuxtjs.org/</a></p>
<h3 id="43-vuepress"><a href="#43-vuepress" class="headerlink" title="43.      vuepress"></a>43.      vuepress</h3><p>Vue 驱动的静态网站生成器<br><a target="_blank" rel="noopener" href="https://v2.vuepress.vuejs.org/zh/">https://v2.vuepress.vuejs.org/zh/</a></p>
<h3 id="44-VueUse"><a href="#44-VueUse" class="headerlink" title="44.      VueUse"></a>44.      VueUse</h3><p>强大的 Vue 组合实用程序集合<br><a target="_blank" rel="noopener" href="https://vueuse.org/">https://vueuse.org/</a></p>
<h2 id="7-动画"><a href="#7-动画" class="headerlink" title="7.动画"></a>7.动画</h2><h3 id="45-vue-starport"><a href="#45-vue-starport" class="headerlink" title="45.   vue-starport"></a>45.   vue-starport</h3><p>带有动画的跨路由共享组件<br><a target="_blank" rel="noopener" href="https://vue-starport.netlify.app/">https://vue-starport.netlify.app/</a></p>
<h3 id="46-vueuse-x2F-motion"><a href="#46-vueuse-x2F-motion" class="headerlink" title="46.     @vueuse&#x2F;motion"></a>46.     @vueuse&#x2F;motion</h3><p>Vue Composables 让你的组件动起来<br><a target="_blank" rel="noopener" href="https://motion.vueuse.org/">https://motion.vueuse.org/</a></p>
<h2 id="8-音视频"><a href="#8-音视频" class="headerlink" title="8.音视频"></a>8.音视频</h2><h3 id="47-vueuse-x2F-sound"><a href="#47-vueuse-x2F-sound" class="headerlink" title="47.   @vueuse&#x2F;sound"></a>47.   @vueuse&#x2F;sound</h3><p>用于播放音效的 Vue 组合<br><a target="_blank" rel="noopener" href="https://sound.vueuse.org/">https://sound.vueuse.org/</a></p>
<p><em>XMind: ZEN - Trial Version</em></p>

  </div>
  <div id="copyright"><style>#easter-egg{border:0;padding:10px 0;position:relative}#easter-egg::before{font-family:"Font Awesome 5 Free";font-weight:900;content:"本文结束 \f1b0  感谢阅读";position:absolute;
padding:0 10px;
line-height:1px;
white-space:nowrap;
left:50%;
transform:translateX(-50%)}
</style><hr id="easter-egg"><blockquote style="padding:0">
    <p>作者: <a href="https://mihaoyou.gitee.io">
        <a1>云静</a1>
    </a></p>
    <p>版权声明: 本博客所有文章除特别声明外, 均采用 <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)"><a1>CC BY-NC-ND 4.0</a1></a> 许可协议, 转载请注明出处！</p></blockquote><hr></div>
</article>


    <div class="blog-post-comments">
        <div id="utterances_thread">
            <noscript>加载评论需要在浏览器启用 JavaScript 脚本支持。</noscript>
        </div>
    </div>


        
          <div id="footer-post-container">
  <div id="footer-post">

    <div id="nav-footer" style="display: none">
      <ul>
         
          <li><a href="/">首页</a></li>
         
          <li><a href="/about/">关于</a></li>
         
          <li><a href="/archives/">归档</a></li>
         
          <li><a href="/categories/">分类</a></li>
         
          <li><a href="/search/">搜索</a></li>
        
      </ul>
    </div>

    <div id="toc-footer" style="display: none">
      <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Vue3"><span class="toc-number">1.</span> <span class="toc-text">Vue3</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-Web-UI%E5%BA%93"><span class="toc-number">1.1.</span> <span class="toc-text">1.Web UI库</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-ElementUI-Plus"><span class="toc-number">1.1.1.</span> <span class="toc-text">1.   ElementUI Plus</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-Ant-Design-of-Vue"><span class="toc-number">1.1.2.</span> <span class="toc-text">2.    Ant Design of Vue</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-BalmUI"><span class="toc-number">1.1.3.</span> <span class="toc-text">3.    BalmUI</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-Naive-UI"><span class="toc-number">1.1.4.</span> <span class="toc-text">4.    Naive UI</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-arco-design"><span class="toc-number">1.1.5.</span> <span class="toc-text">5.    arco.design</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-Quasar"><span class="toc-number">1.1.6.</span> <span class="toc-text">6,     Quasar</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-iDUX"><span class="toc-number">1.1.7.</span> <span class="toc-text">7.      iDUX</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#8-TDesign"><span class="toc-number">1.1.8.</span> <span class="toc-text">8.     TDesign</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#9-PrimeVue"><span class="toc-number">1.1.9.</span> <span class="toc-text">9.      PrimeVue</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#10-DevUI"><span class="toc-number">1.1.10.</span> <span class="toc-text">10.    DevUI</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#11-vuestic-ui"><span class="toc-number">1.1.11.</span> <span class="toc-text">11.     vuestic-ui</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-Headless-UI"><span class="toc-number">1.1.12.</span> <span class="toc-text">12.     Headless UI</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#13-View-UI-Plus"><span class="toc-number">1.1.13.</span> <span class="toc-text">13.      View UI Plus</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E7%A7%BB%E5%8A%A8UI%E5%BA%93"><span class="toc-number">1.2.</span> <span class="toc-text">2.移动UI库</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#14-Vant"><span class="toc-number">1.2.1.</span> <span class="toc-text">14.       Vant</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#15-NutUI"><span class="toc-number">1.2.2.</span> <span class="toc-text">15.      NutUI</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#16-Varlet"><span class="toc-number">1.2.3.</span> <span class="toc-text">16.     Varlet</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#17-nutui-bingo"><span class="toc-number">1.2.4.</span> <span class="toc-text">17.       nutui-bingo</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7"><span class="toc-number">1.3.</span> <span class="toc-text">3.相关工具</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#18-unplugin-vue-components"><span class="toc-number">1.3.1.</span> <span class="toc-text">18.      unplugin-vue-components</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#19-vuex-persistedstate"><span class="toc-number">1.3.2.</span> <span class="toc-text">19.      vuex-persistedstate</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#20-vuex-persist"><span class="toc-number">1.3.3.</span> <span class="toc-text">20.       vuex-persist</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#21-vueuse-x2F-gesture"><span class="toc-number">1.3.4.</span> <span class="toc-text">21.      @vueuse&#x2F;gesture</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#22-unplugin-auto-import"><span class="toc-number">1.3.5.</span> <span class="toc-text">22.      unplugin-auto-import</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#23-pinia-plugin-persistedstate"><span class="toc-number">1.3.6.</span> <span class="toc-text">23.     pinia-plugin-persistedstate</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#24-https-vue-termui-dev"><span class="toc-number">1.3.7.</span> <span class="toc-text">24.     https:&#x2F;&#x2F;vue-termui.dev&#x2F;</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E5%8F%AF%E8%A7%86%E5%8C%96"><span class="toc-number">1.4.</span> <span class="toc-text">4.可视化</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#25-Pdfvuer"><span class="toc-number">1.4.1.</span> <span class="toc-text">25.    Pdfvuer</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#26-vue3-marquee"><span class="toc-number">1.4.2.</span> <span class="toc-text">26.      vue3-marquee</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#27-Vue-ECharts"><span class="toc-number">1.4.3.</span> <span class="toc-text">27.     Vue-ECharts</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#28-iconpark"><span class="toc-number">1.4.4.</span> <span class="toc-text">28.     iconpark</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E6%8F%92%E4%BB%B6"><span class="toc-number">1.5.</span> <span class="toc-text">5.插件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#29-vue-multiselect-next"><span class="toc-number">1.5.1.</span> <span class="toc-text">29.    vue-multiselect-next</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#30-vue-print-nb"><span class="toc-number">1.5.2.</span> <span class="toc-text">30.     vue-print-nb</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#31-vue-i18n-next"><span class="toc-number">1.5.3.</span> <span class="toc-text">31.      vue-i18n-next</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#32-vue-cropper"><span class="toc-number">1.5.4.</span> <span class="toc-text">32.     vue-cropper</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#33-Vue-Grid-Layout"><span class="toc-number">1.5.5.</span> <span class="toc-text">33.     Vue Grid Layout</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#34-Vue-Qrcode-Reader"><span class="toc-number">1.5.6.</span> <span class="toc-text">34.     Vue Qrcode Reader</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#35-Makeit-Captcha"><span class="toc-number">1.5.7.</span> <span class="toc-text">35.     Makeit Captcha</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#36-vue3-clipboard"><span class="toc-number">1.5.8.</span> <span class="toc-text">36.     vue3-clipboard</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#37-vue-draggable"><span class="toc-number">1.5.9.</span> <span class="toc-text">37.       vue.draggable</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#38-BetterScroll"><span class="toc-number">1.5.10.</span> <span class="toc-text">38.        BetterScroll</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E7%9B%B8%E5%85%B3%E7%94%9F%E6%80%81"><span class="toc-number">1.6.</span> <span class="toc-text">6.相关生态</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#39-Vue-%E6%8F%92%E4%BB%B6%E5%BA%93"><span class="toc-number">1.6.1.</span> <span class="toc-text">39.    Vue 插件库</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#40-Pinia"><span class="toc-number">1.6.2.</span> <span class="toc-text">40.     Pinia</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#41-Nuxt-Modules"><span class="toc-number">1.6.3.</span> <span class="toc-text">41.     Nuxt Modules</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#42-Nuxt-3"><span class="toc-number">1.6.4.</span> <span class="toc-text">42.      Nuxt 3</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#43-vuepress"><span class="toc-number">1.6.5.</span> <span class="toc-text">43.      vuepress</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#44-VueUse"><span class="toc-number">1.6.6.</span> <span class="toc-text">44.      VueUse</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E5%8A%A8%E7%94%BB"><span class="toc-number">1.7.</span> <span class="toc-text">7.动画</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#45-vue-starport"><span class="toc-number">1.7.1.</span> <span class="toc-text">45.   vue-starport</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#46-vueuse-x2F-motion"><span class="toc-number">1.7.2.</span> <span class="toc-text">46.     @vueuse&#x2F;motion</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-%E9%9F%B3%E8%A7%86%E9%A2%91"><span class="toc-number">1.8.</span> <span class="toc-text">8.音视频</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#47-vueuse-x2F-sound"><span class="toc-number">1.8.1.</span> <span class="toc-text">47.   @vueuse&#x2F;sound</span></a></li></ol></li></ol></li></ol>
    </div>

    <div id="share-footer" style="display: none">
      <ul>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.facebook.com/sharer.php?u=https://mihaoyou.gitee.io/UI%E5%BA%93-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7-%E5%8F%AF%E8%A7%86%E5%8C%96-%E7%94%9F%E6%80%81%E5%85%A8%E5%88%86%E4%BA%AB/"><i class="fab fa-facebook fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://twitter.com/share?url=https://mihaoyou.gitee.io/UI%E5%BA%93-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7-%E5%8F%AF%E8%A7%86%E5%8C%96-%E7%94%9F%E6%80%81%E5%85%A8%E5%88%86%E4%BA%AB/&text=UI库/相关工具/可视化/生态全分享"><i class="fab fa-twitter fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.linkedin.com/shareArticle?url=https://mihaoyou.gitee.io/UI%E5%BA%93-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7-%E5%8F%AF%E8%A7%86%E5%8C%96-%E7%94%9F%E6%80%81%E5%85%A8%E5%88%86%E4%BA%AB/&title=UI库/相关工具/可视化/生态全分享"><i class="fab fa-linkedin fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://pinterest.com/pin/create/bookmarklet/?url=https://mihaoyou.gitee.io/UI%E5%BA%93-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7-%E5%8F%AF%E8%A7%86%E5%8C%96-%E7%94%9F%E6%80%81%E5%85%A8%E5%88%86%E4%BA%AB/&is_video=false&description=UI库/相关工具/可视化/生态全分享"><i class="fab fa-pinterest fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=UI库/相关工具/可视化/生态全分享&body=Check out this article: https://mihaoyou.gitee.io/UI%E5%BA%93-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7-%E5%8F%AF%E8%A7%86%E5%8C%96-%E7%94%9F%E6%80%81%E5%85%A8%E5%88%86%E4%BA%AB/"><i class="fas fa-envelope fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://getpocket.com/save?url=https://mihaoyou.gitee.io/UI%E5%BA%93-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7-%E5%8F%AF%E8%A7%86%E5%8C%96-%E7%94%9F%E6%80%81%E5%85%A8%E5%88%86%E4%BA%AB/&title=UI库/相关工具/可视化/生态全分享"><i class="fab fa-get-pocket fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://reddit.com/submit?url=https://mihaoyou.gitee.io/UI%E5%BA%93-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7-%E5%8F%AF%E8%A7%86%E5%8C%96-%E7%94%9F%E6%80%81%E5%85%A8%E5%88%86%E4%BA%AB/&title=UI库/相关工具/可视化/生态全分享"><i class="fab fa-reddit fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.stumbleupon.com/submit?url=https://mihaoyou.gitee.io/UI%E5%BA%93-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7-%E5%8F%AF%E8%A7%86%E5%8C%96-%E7%94%9F%E6%80%81%E5%85%A8%E5%88%86%E4%BA%AB/&title=UI库/相关工具/可视化/生态全分享"><i class="fab fa-stumbleupon fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://digg.com/submit?url=https://mihaoyou.gitee.io/UI%E5%BA%93-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7-%E5%8F%AF%E8%A7%86%E5%8C%96-%E7%94%9F%E6%80%81%E5%85%A8%E5%88%86%E4%BA%AB/&title=UI库/相关工具/可视化/生态全分享"><i class="fab fa-digg fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.tumblr.com/share/link?url=https://mihaoyou.gitee.io/UI%E5%BA%93-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7-%E5%8F%AF%E8%A7%86%E5%8C%96-%E7%94%9F%E6%80%81%E5%85%A8%E5%88%86%E4%BA%AB/&name=UI库/相关工具/可视化/生态全分享&description="><i class="fab fa-tumblr fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://news.ycombinator.com/submitlink?u=https://mihaoyou.gitee.io/UI%E5%BA%93-%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7-%E5%8F%AF%E8%A7%86%E5%8C%96-%E7%94%9F%E6%80%81%E5%85%A8%E5%88%86%E4%BA%AB/&t=UI库/相关工具/可视化/生态全分享"><i class="fab fa-hacker-news fa-lg" aria-hidden="true"></i></a></li>
</ul>

    </div>

    <div id="actions-footer">
        <a id="menu" class="icon" href="#" onclick="$('#nav-footer').toggle();return false;"><i class="fas fa-bars fa-lg" aria-hidden="true"></i> 菜单</a>
        <a id="toc" class="icon" href="#" onclick="$('#toc-footer').toggle();return false;"><i class="fas fa-list fa-lg" aria-hidden="true"></i> 目录</a>
        <a id="share" class="icon" href="#" onclick="$('#share-footer').toggle();return false;"><i class="fas fa-share-alt fa-lg" aria-hidden="true"></i> 分享</a>
        <a id="top" style="display:none" class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fas fa-chevron-up fa-lg" aria-hidden="true"></i> 返回顶部</a>
    </div>

  </div>
</div>

        
        <footer id="footer">
      <div class="footer-left">
        Copyright &copy;
        
        
        2022-2023
        云雪
      </div>
      <div class="footer-right">
        <nav>
          <ul>
            <!--
          --><li><a href="/">首页</a></li><!--
        --><!--
          --><li><a href="/about/">关于</a></li><!--
        --><!--
          --><li><a href="/archives/">归档</a></li><!--
        --><!--
          --><li><a href="/categories/">分类</a></li><!--
        --><!--
          --><li><a href="/search/">搜索</a></li><!--
        -->
          </ul>
          <ul>
          
              <!-- 不蒜子统计 -->
              <span id="busuanzi_container_site_pv">
                  本站总访问量<span id="busuanzi_value_site_pv"></span>次
              </span>
              <span class="post-meta-divider">|</span>
              <span id="busuanzi_container_site_uv" style='display:none'>
                      本站访客数<span id="busuanzi_value_site_uv"></span>人
              </span>
            <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            
          </ul>
        </nav>
      </div>
      
</footer>


    </div>
    <!-- styles -->



  <link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'"/>


    <!-- jquery -->
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script> 




<!-- clipboard -->

  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.7/clipboard.min.js" crossorigin="anonymous"></script> 
  
  <script type="text/javascript">
  $(function() {
    // copy-btn HTML
    var btn = "<span class=\"btn-copy tooltipped tooltipped-sw\" aria-label=\"复制到粘贴板！\">";
    btn += '<i class="far fa-clone"></i>';
    btn += '</span>'; 
    // mount it!
    $(".highlight table").before(btn);
    var clip = new ClipboardJS('.btn-copy', {
      text: function(trigger) {
        return Array.from(trigger.nextElementSibling.querySelectorAll('.code')).reduce((str,it)=>str+it.innerText+'\n','')
      }
    });
    clip.on('success', function(e) {
      e.trigger.setAttribute('aria-label', "复制成功！");
      e.clearSelection();
    })
  })
  </script>


<script src="/js/main.js"></script>

<!-- search -->

<!-- Google Analytics -->

<!-- Baidu Analytics -->

  <script type="text/javascript">
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?d052d72734717a430b46e4d07257350b";
          var s = document.getElementsByTagName("script")[0];
          s.parentNode.insertBefore(hm, s);
        })();
        </script>

<!-- Cloudflare Analytics -->

<!-- Umami Analytics -->

<!-- Disqus Comments -->

<!-- utterances Comments -->

    <script type="text/javascript">
      var utterances_repo = 'mihaoyou/huayu';
      var utterances_issue_term = 'pathname';
      var utterances_label = 'Comment';
      var utterances_theme = 'github-dark';

      (function(){
          var script = document.createElement('script');

          script.src = 'https://utteranc.es/client.js';
          script.setAttribute('repo', utterances_repo);
          script.setAttribute('issue-term', 'pathname');
          script.setAttribute('label', utterances_label);
          script.setAttribute('theme', utterances_theme);
          script.setAttribute('crossorigin', 'anonymous');
          script.async = true;
          (document.getElementById('utterances_thread')).appendChild(script);
      }());
  </script>

</body>
</html>
